<template>
    <div class='container'>
      <!-- 修改弹框 -->
      <el-dialog title="添加文章" :visible="editArcitcalDialog" width="40%" @close="resetEditArt">
        <!-- 表单区域 -->
        <el-form :model="editArtical"   ref="editArticlesForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="title" class="elform">
            <el-input v-model="editArtical.title"  placeholder="请输入文章标签"></el-input>
          </el-form-item>
          <el-form-item label="文章标题" prop="articleBody" class="elform">
            <quill-editor v-model="editArtical.articleBody" style="margin-left: 0px;"  ref="Editor"> </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" class="elform">
            <el-input v-model="editArtical.videoURL" placeholder="请输入视频地址"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetEditArt">取 消</el-button>
          <el-button type="primary" @click="confimrArtical" >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 引入文章添加方法
import { update as updateArtical } from '@/api/hmmm/articles'
export default {
  components: {
    quillEditor
  },
  props: {
    editArcitcalDialog: {
      type: Boolean,
      default: false
    },
    editArtical: {
      type: Object
    }
  },
  methods: {
    // 关闭弹框
    resetEditArt () {
      this.$emit('update:editArcitcalDialog', false)
      // 清空表单
    },
    // 添加面试技巧
    confimrArtical () {
      console.log(111)
      updateArtical({
        id: this.editArtical.id,
        title: this.editArtical.title,
        articleBody: this.editArtical.articleBody,
        videoURL: this.editArtical.videoURL
      })
        .then(() => {
          console.log('修改成功')
          //   提示用户修改成功
          this.$message.success('修改成功')
          // 关闭弹框
          this.$emit('update:editArcitcalDialog', false)
          //   告诉父组件我做完了‘
          this.$emit('done')
        })
    }
  }

}
</script>
